import { useIntl } from '@umijs/max';
import { Spin } from 'antd';
import ReactEcharts from 'echarts-for-react';
import React, { useEffect, useRef, useState } from 'react';

interface Ipros {
  chartData: API.OfflineStatisticsDTO;
}
export const BarChart: React.FC<Ipros> = ({ chartData }) => {
  const [loading, setLoading] = useState(true);
  const [isEmpty, setEmpty] = useState(true);
  const [pageData, setPageData] = useState<API.OfflineStatisticsDTO>({});
  const chartRef = useRef(null);
  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';
  // const colors = ['#1a6cfe', '#ff7f0e'];

  useEffect(() => {
    chartRef?.current?.getEchartsInstance()?.resize();
  });

  useEffect(() => {
    if (chartData && chartData !== null) {
      chartRef?.current?.getEchartsInstance()?.clear();
      setLoading(false);
      setPageData(chartData);
      setEmpty(false);
    } else {
      chartRef?.current?.getEchartsInstance()?.clear();
      setLoading(false);
      setEmpty(true);
    }
  }, [chartData]);
  return (
    <div style={{ width: '100%' }}>
      <Spin spinning={loading}>
        <ReactEcharts
          ref={chartRef}
          style={{ height: 240 }}
          option={{
            tooltip: {
              trigger: 'axis',
              show: !isEmpty,
              formatter: function (params) {
                let text = `<div>`;
                let unit = isEnglish ? '' : '个';
                params.forEach((item) => {
                  if (item?.value) {
                    const value = item.value;

                    text += `${item.marker}${item.axisValueLabel}&nbsp;:&nbsp;&nbsp;${value}${unit}<br/><br/>`;
                  }
                });
                text += '</div>';
                return text;
              },
            },
            dataZoom: [
              {
                type: 'inside', // 内置型数据区域缩放组件
                start: 0, // 默认起始位置为 0%
                end: 100, // 默认结束位置为 100%
              },
            ],
            legend: {
              right: 0,
              top: 0,
              show: false,
              icon: 'circle',
              data: [
                {
                  name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offBox' }),
                  icon: 'circle',
                },
                {
                  name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offStack' }),
                  icon: 'circle',
                },
                {
                  name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offClu' }),
                  icon: 'circle',
                },
                {
                  name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offModule' }),
                  icon: 'circle',
                },
                {
                  name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offSig' }),
                  icon: 'circle',
                },
              ],
            },
            grid: {
              left: 40,
              right: 5,
              top: 10,
              bottom: 15,
              containLabel: true,
              show: true,
              borderColor: 'transparent',
              backgroundColor: isEmpty ? 'transparent' : '#F8F9FA',
            },
            xAxis: [
              {
                type: 'category',
                name: false,
                nameTextStyle: {
                  //y轴上方单位的颜色
                  color: '#222',
                },
                data: [
                  intl.formatMessage({
                    id: 'stationRealtimeMonitoring.offBox',
                  }),
                  intl.formatMessage({
                    id: 'stationRealtimeMonitoring.offStack',
                  }),
                  intl.formatMessage({
                    id: 'stationRealtimeMonitoring.offClu',
                  }),
                  intl.formatMessage({
                    id: 'stationRealtimeMonitoring.offModule',
                  }),
                  intl.formatMessage({
                    id: 'stationRealtimeMonitoring.offSig',
                  }),
                ],
                axisTick: {
                  alignWithLabel: true,
                  show: true,
                  inside: true, //刻度内置
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#ddd',
                  },
                },
                axisLabel: {
                  color: '#222',
                },
              },
            ],
            yAxis: [
              {
                type: 'value',
                nameTextStyle: {
                  color: '#222',
                  align: 'left',
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#ddd',
                  },
                },
                axisTick: {
                  show: true,
                  inside: true,
                },
                splitLine: {
                  show: !isEmpty,
                  lineStyle: {
                    type: 'dashed',
                  },
                },
                axisLabel: {
                  color: '#222',
                },
              },
            ],
            series: [
              {
                type: 'bar',
                name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offBox' }),
                data: [pageData?.boxOfflineCount, null, null, null, null], //
                // itemStyle: {
                //     color: colors[0], //
                // },
                barWidth: '30%',
                barGap: '-100%', // Overlap bars
              },
              {
                type: 'bar',
                name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offStack' }),
                data: [null, pageData?.bmsOfflineCount, null, null, null], //
                // itemStyle: {
                //     color: colors[1], //
                // },
                barWidth: '30%',
                barGap: '-100%', // Overlap bars
              },
              {
                type: 'bar',
                name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offClu' }),
                data: [null, null, pageData?.clusterOfflineCount, null, null], //
                // itemStyle: {
                //     color: colors[1], //
                // },
                barWidth: '30%',
                barGap: '-100%', // Overlap bars
              },
              {
                type: 'bar',
                name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offModule' }),
                data: [null, null, null, pageData?.bmuOfflineCount, null], //
                // itemStyle: {
                //     color: colors[1], //
                // },
                barWidth: '30%',
                barGap: '-100%', // Overlap bars
              },
              {
                type: 'bar',
                name: intl.formatMessage({ id: 'stationRealtimeMonitoring.offSig' }),
                data: [null, null, null, null, pageData?.unitOfflineCount], //
                // itemStyle: {
                //     color: colors[1], //
                // },
                barWidth: '30%',
                barGap: '-100%', // Overlap bars
              },
            ],
            graphic: [
              {
                type: 'image',
                silent: true,
                style: {
                  image: require('@/assets/img/empty.png'),
                  width: 180,
                  height: 120,
                },
                bounding: 'raw',
                top: 'center',
                left: 'center',
                invisible: !isEmpty,
              },
              {
                type: 'text', // 类型：文本
                left: 'center',
                top: 260,
                silent: true, // 不响应事件
                invisible: !isEmpty, // 有数据就隐藏
                style: {
                  fill: '#222',
                  text: intl.formatMessage({
                    id: 'global.noDataYet',
                  }),
                  fontFamily: 'Microsoft YaHei',
                  fontSize: '14px',
                },
              },
            ],
          }}
        />
      </Spin>
    </div>
  );
};

export default BarChart;
